<template>
  <VerticalLayout>
    <template #header>
      <UserManualSelectHeader content="选择执行人" />
    </template>
    <UserManualSelectSelector @change="selectUserChange" :nodeSelectMap="nodeSelectMap" :userManualSelect="userManualSelect"/>

    <template #footer v-if="showFooter">
      <UserManualSelectFooter @cancel="cancel" @ok="handleOK"/>
    </template>
  </VerticalLayout>
</template>
<script setup>
import {createProps} from '@/utils';
import VerticalLayout from '@comp/Layout/VerticalLayout.vue';
import UserManualSelectTabs from '@comp/UserManualSelect/UserManualSelectTabs.vue';
import {computed, ref, shallowRef} from 'vue';
import UserManualSelectSelector from '@comp/UserManualSelect/UserManualSelectSelector.vue';
import UserManualSelectHeader from '@comp/UserManualSelect/UserManualSelectHeader.vue';
import UserManualSelectFooter from '@comp/UserManualSelect/UserManualSelectFooter.vue';

defineOptions({name: 'UserManualSelect'});
const props = defineProps({
  userManualSelect: createProps(Object, () => ({}))
});
const nodeSelectMap = ref({});
const showFooter = shallowRef(false);
const emits = defineEmits(['cancel', 'ok'])

function handleOK() {
  try {
    let list = props.userManualSelect.select
    for (let i = 0; i < list.length; i++) {
      list[i].users = list[i].selectedUsers
    }
  } catch(e) {
    console.error(e)
  }
  emits('ok', props.userManualSelect);
}
function cancel() {
  emits('cancel');
}

function selectUserChange() {
  showFooter.value = getShowFooter();
}

function getShowFooter() {
  let flag = true;
  try {
    let list = props.userManualSelect.select
    if (!list || !list.length) return false
    for (let i = 0; i < list.length; i++) {
      let selectedUsers = list[i].selectedUsers

      if (!selectedUsers || !selectedUsers.length) {
        return flag = false;
      }
    }

    return flag
  } catch (e) {}

  return false
}
</script>
<style scoped lang="less">

</style>